<%- include("./layouts/header.ejs")%>

  <div class="main">
  <%- include("./layouts/navBar.ejs")%>
    <div class="container-fluid">
      <div class="page-title">
        <h1>导航菜单</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="row">
        <div class="col-md-4">
          <form id="myForm">
            <h2>添加新导航链接</h2>
            <div class="form-group">
              <label for="text">文本</label>
              <input id="text" class="form-control" name="text" type="text" placeholder="文本">
            </div>
            <div class="form-group">
              <label for="title">标题</label>
              <input id="title" class="form-control" name="title" type="text" placeholder="标题">
            </div>
            <div class="form-group">
              <label for="link">链接</label>
              <input id="link" class="form-control" name="link" type="text" placeholder="链接">
            </div>
            <!-- 使用fonts-awesome插件添加图标 -->
            <div class="form-group">
              <label for="icon">使用fonts-awesome图标</label>
              <input id="icon" class="form-control" name="icon" type="text" placeholder="图标">
            </div>
            <div class="form-group">
              <!-- <button class="btn btn-primary" type="submit">添加</button> -->
              <span class="btn btn-primary" id="btnAdd">添加</span>
            </div>
          </form>
        </div>
        <div class="col-md-8">
          <div class="page-action">
            <!-- show when multiple checked -->
            <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
          </div>
          <table class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th class="text-center" width="40"><input type="checkbox"></th>
                <th>文本</th>
                <th>标题</th>
                <th>链接</th>
                <th class="text-center" width="100">操作</th>
              </tr>
            </thead>
            <tbody>
              

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <%- include("./layouts/aside.ejs")%>

  <%- include("./layouts/footer.ejs")%>
<!-- 准备前端art-template模板 -->
<script type="text/template" id="navMenusListTmp">
  {{each data as val key}}
  <tr>
    <td class="text-center"><input type="checkbox"></td>
    <td><i class="{{val.icon}}"></i>{{val.text}}</td>
    <td>{{val.title}}</td>
    <td>{{val.link}}</td>
    <td class="text-center">
      <a href="javascript:;" data-id="{{key}}" class="btnDel btn btn-danger btn-xs">删除</a>
    </td>
  </tr>
  {{/each}}
</script>

  <script>
    //1.发送异步ajax请求
    $.ajax({
      type:"get",
      url:"/getNavMenusData",
      dataType:"json",
      success: function(res){
        //读取成功返回数据
        if(res&&res.code==0){
          //准备模板渲染数据
          var htmlStr = template("navMenusListTmp",res)
          $("tbody").html(htmlStr)
        }
      }
    })

    //2.添加导航项
    $("#btnAdd").on("click",function(){
      //2.1发送异步ajax请求
      $.ajax({
        type:"post",
        url:"/addNewNavMenus",
        data: $("#myForm").serialize(), //表单序列化
        dataType: "json",
        success: function(res){
          if(res&&res.code==0){
            //重新渲染模板页面
            var htmlStr = template("navMenusListTmp",res)
            $("tbody").html(htmlStr)

            //清空提交的数据
            $("input[name]").val("")
          }
        }
      })
    })

    //3.删除导航
    //3.1使用委托注册事件
    $("tbody").on("click",".btnDel",function(){
      //3.2发送ajax请求
      $.ajax({
        type:"get",
        url:"/delNavMenus",
        data:{
          index: $(this).attr('data-id') //获取点击项的索引
        },
        dataType:"json",
        success: function(res){
          // 读取成功需要重新渲染页面
          if(res&&res.code==0){
            var htmlStr = template("navMenusListTmp",res)
            $("tbody").html(htmlStr)
          }
        }
      })
    })

  </script>
